<template>
  <div>

    <div>
      <el-dialog
          title="个人信息"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose"
          center>
        <el-form label-position="right"
                 :model="addData" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm"
                 :rules="fromRules">
          <el-form-item label="登录账号:" prop="name">
            <el-input style="width: 92%" v-model="user.username" clearable :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="旧密码:" prop="telephone">
            <el-input style="width: 92%" v-model="addData.telephone" clearable></el-input>
          </el-form-item>
          <el-form-item label="新密码:" prop="password">
            <el-input style="width: 92%" v-model="addData.password" clearable></el-input>
          </el-form-item>
          <el-form-item label="电话:" prop="phone">
            <el-input style="width: 92%" v-model="addData.phone" clearable></el-input>
          </el-form-item>
          <el-form-item label="地址:">
            <el-input style="width: 92%" v-model="addData.address" clearable></el-input>
          </el-form-item>
          <el-form-item label="头像地址:">
            <el-input style="width: 92%" v-model="addData.userFace" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <!--@keydown.enter.native 键盘回车触发-->
            <el-button type="primary" @click="submitForm()">提交</el-button>
            <el-button @click="cancel()">取 消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <el-container>

      <el-header class="headerSon">
        <div class="title">
          <span class="vintage4">教学系统： {{ user.teacher ? '教师端' : '学生端' }}</span>
        </div>
        <!--个人中心下拉框-->
        <el-dropdown class="userInfo" @command="commandHandler">
          <span class="el-dropdown-link">
            <font class="fontSize">
              <span class="vintage4"> {{ user.name }}
              </span>
            </font>
            <i><img :src="img"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="setUp">设置</el-dropdown-item>
            <el-dropdown-item command="notice">通知</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            <!--<el-dropdown-item disabled>双皮奶</el-dropdown-item>-->
            <!--<el-dropdown-item divided>蚵仔煎</el-dropdown-item>-->
          </el-dropdown-menu>
        </el-dropdown>

      </el-header>
      <el-container>
        <el-aside width="200px">
          <!--菜单点击事件-->
          <!--<el-menu @select="menClick">-->
          <!--开启路由模式之后就不用写传统的点击事件来跳转界面-->
          <el-menu router unique-opened>
            <!--遍历路由 routes 中的整个数组所有路由，item 是遍历的每一个路由对象，index是下标-->
            <!--v-if="user.teacher?!item.Login:item.student"-->
            <!--true？不显示登录页:除了显示学生页其他的都不显示-->
            <el-submenu
                v-for="(item,index) in routes"
                v-if="user.teacher?!item.login:item.student"
                :index="index + ''"
                :key="index">
              <!--菜单导航-->
              <template slot="title">
                <i :class="item.icon" :style="color"></i>
                <span>{{ item.name }}</span>
              </template>
              <!--子菜单-->
              <!--循环子菜单中的页面对象，children是父菜单中的一个数组 :index="children.path" :页面跳转的路由-->
              <el-menu-item v-for="(children,childrenIndex) in item.children" :index="children.path"
                            :key="childrenIndex">
                {{ children.name }}
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!--不是首页的时候在显示面包屑效果-->
          <el-breadcrumb separator-class="el-icon-arrow-right" v-if="this.$router.currentRoute.path!='/home'">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <!--当前路由名字-->
            <el-breadcrumb-item>{{ this.$router.currentRoute.name }}</el-breadcrumb-item>
          </el-breadcrumb>
          <!--如果路由是/home页面 是首页在显示这个div的内容-->
          <div class="homeWeCome" v-if="this.$router.currentRoute.path=='/home'">
            <div style="height: 80px">
              <br>
              <span style="font-size: 20px">系统通知：所有的成功,都来自于不倦的努力和奔跑。</span>
            </div>
            <el-divider></el-divider>
            <template>
              <el-carousel :interval="4000" type="card" height="500px">
                <el-carousel-item v-for="item in notifyList" :key="item">
                  <br>
                  <span class="vintage1">
                    发布人：{{ item.nicUserName }}
                  </span>
                  <br>
                  <br>
                  <span class="vintage1">
                    发布时间：{{ item.nicCreateTime }}
                  </span>
                  <br>
                  <br>
                  <span class="vintage3">
                    通知内容：{{ item.nicTitle }}
                  </span>
                </el-carousel-item>
              </el-carousel>
            </template>
          </div>
          <router-view class="homeRouterView"/>
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>


<script>


export default {
  name: "Home",
  // 传统的点击事件跳转界面，如果有很多菜单需要跳转，就会写很多重复代码
  // methods:{
  //     menClick(index){
  //         this.$router.push(index);
  //     }
  // }
  data() {
    return {
      // 控制通知
      x: 0,
      // 添加 & 修改 弹窗
      dialogVisible: false,
      // 操作对象
      addData: {},
      // 通知
      notifyList: [],
      // 获取当前登录用户信息，在manin.js登录验证存进的session，接口获取的是一个json格式字符串，转换为js对象
      user: JSON.parse(window.sessionStorage.getItem('user')),
      // 用户头像图片
      img: window.sessionStorage.getItem('img'),
      // 菜单导航图标颜色
      color: 'color: blue;margin-right: 5px',
      fromRules: {
        telephone: [
          {required: true, message: '请输入旧密码', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入新密码', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入电话', trigger: 'blur'}
        ]
      }
    }
  },
  computed: {
    routes() {
      // 从index.js取
      return this.$router.options.routes;
      //从 Vuex 中获取菜单数据
      // return this.$store.state.routes;
    }
  },
  // 一进入页面就要调用的接口放到 mounted 里面，比如页面表格分页
  mounted() {
    this.initTable();
    this.commandHandler('notice');
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    commandHandler(command) {
      if (command === 'logout') {
        this.$confirm('此操作将退出登陆, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 注销处理
          this.postRequestData('/logout')
          // 清除 session 缓存
          window.sessionStorage.removeItem("tokenStr")
          window.sessionStorage.removeItem("user")
          window.sessionStorage.removeItem("img")
          // 跳转到登录页
          this.$router.replace('/');
        }).catch(() => {
          this.$message({
            type: 'success',
            message: '已取消'
          });
        });
      }
      if (command === 'notice') {
        if (this.x === 0) {
          this.x = 1
          this.getRequestParams('/notice/maxNotice').then(res => {
            if (res) {
              const h = this.$createElement;
              this.$notify.info({
                title: '最新通知--' + '发布人：' + res.nicUserName,
                message: h('i', {style: 'color: #409EFF'}, '通知内容：' + res.nicTitle),
                position: 'bottom-left',
                duration: 15000
              });
            }
          })
        } else {
          this.getRequestParams('/notice/maxNotice').then(res => {
            if (res) {
              const h = this.$createElement;
              this.$notify.info({
                title: '最新通知--' + '发布人：' + res.nicUserName,
                message: h('i', {style: 'color: #409EFF'}, '通知内容：' + res.nicTitle),
                position: 'bottom-left',
                duration: 15000
              });
            }
          })
        }

      }
      if (command === 'setUp') {
        this.dialogVisible = true
        this.addData = {
          phone: this.user.phone,
          address: this.user.address,
          userFace: this.user.userFace
        }
      }
    },
    initTable() {
      this.getRequestParams('/notice/list').then(res => {
        if (res) {
          this.notifyList = res
        }
      })
    }
    ,
    /**
     * 取消
     */
    cancel() {
      // 关闭弹窗
      this.dialogVisible = false
      // 初始化
      this.addData = {}
    },
    /**
     * 提交表单
     */
    submitForm() {
      // 正则校验表单数据
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {// 验证通过
          // 调用添加接口
          this.postRequestData('/admin-pass', this.addData).then(data => {
            // 修改成功
            if (data) {
              // 刷新表格数据
              this.initTable();
            }
          })
          // 关闭弹窗
          this.dialogVisible = false;
          this.addData = {}
          this.$refs.ruleForm.resetFields();
        } else {
          this.$message.error('请输入必填项!');
          return false;
        }
      });
    }
  }
}
</script>

<style>
.headerSon {
  background: blueviolet;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  box-sizing: border-box;
}

.headerSon .title {
  font-size: 20px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;;
  color: white;
}


.headerSon .userInfo {
  cursor: pointer;
}

.el-dropdown-link img {
  color: blueviolet;
  width: 35px;
  height: 35px;
  border-radius: 24px;
  margin-left: 10px;
}

.fontSize {
  font-size: 20px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  color: white;
}

.homeWeCome {
  /*!*居中*!*/
  /*text-align: center;*/
  /*字体大小*/
  font-size: 30px;
  /*字体*/
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  /*颜色*/
  color: blueviolet;
  /*靠左*/
  padding-left: 50px;
}

.homeRouterView {
  margin-top: 10px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}

.el-carousel__item {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  /*font-family: Verdana;*/
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.vintage2 {
  color: transparent;

  -webkit-text-stroke: 1px red;

  letter-spacing: 0.04em;
}

.vintage3 {
  color: transparent;

  background-color: blue;

  text-shadow: rgba(255, 255, 255, 0.5) 0 5px 6px, rgba(255, 255, 255, 0.2) 1px 3px 3px;

  -webkit-background-clip: text;

}

.vintage1 {
  background: #EEE url() repeat;

  text-shadow: 5px -5px black, 4px -4px white;

  font-weight: bold;

  -webkit-text-fill-color: transparent;

  -webkit-background-clip: text
}

.vintage4 {
  color: gold;

  letter-spacing: 0;

  text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135
}

.vintage5 {
  font-family: cursive;
  text-shadow: 6px 2px 2px #333;
  color: deeppink

}

</style>
